<template>
  <div class="root">
    <nav>
      <span style="font-size:5vw;" @click="goHome" class="fa fa-angle-left nav-one"></span>
      <span class="nav-one" >下载二维码</span>
        <span class="nav-one " @click="sharess()">分享</span>
    </nav>
    <main>
      <div class="content">
        <div class="content-main">
          <h3>一句不简单的话</h3>
          <div class="imgBorder">
            <img src="../assets/qrcode.png" alt>
          </div>
          <div style="padding-top:3vw;">
            <span>扫一扫,快速下载</span>
          </div>
        </div>
      </div>
    </main>
    <popup :show-mask='false' v-model="isShow" position='bottom' >
         <div class="add" >
                <share @canShare='cancelShare'></share>
         </div>
     </popup>
   
  </div>
</template>
<script>
import share from './share/share'
export default {
  data() {
    return {
      isShow: false
    };
  },
  components:{
      share
  },
  methods: {
    goHome: function() {
      this.$emit("goHome");
      $(".weui-tabbar").show();
    },
    sharess: function() {
      this.isShow = !this.isShow
    },
    cancelShare:function() {
        this.isShow = false
    }
  }
};
</script>

<style scoped>
nav {
  width: 100vw;
  height: 10vw;
  background: #09bb07;
  color: white;
  font-size: 4.5vw;
  line-height: 12vw;
  box-sizing: border-box;
  text-align: left;

  
}
.nav-one:nth-child(1){
    padding-left: 5vw;
}
.nav-one{
    padding: 0 12vw;
    box-sizing: border-box;
}
.content {
  margin: 5vw auto;
  width: 90vw;
  height: 150vw;
  background-color: white;
  position: relative;
}
.imgBorder {
  width: 70vw;
  height: 70vw;
  margin: 0 auto;
  border: 1px solid gray;
  position: relative;
}
img {
  width: 60vw;
  height: 60vw;
  position: absolute;
  left: 5vw;
  top: 5vw;
}
h3 {
  padding-bottom: 3vw;
}
.content-main {
  box-sizing: border-box;
  padding: 35vw 0;
}
</style>
